<script setup lang="ts">
import { toRefs } from 'vue'
const props = defineProps(['formData', 'form'])
const { formData, form } = toRefs(props)
</script>

<template>
  <van-form style="padding-top: 15px;">
    <van-cell-group inset>
      <template v-for="(item, key) in formData" :key="key">
        <!-- 选择器-->
        <template v-if="item.type === 'select'" >
          <van-field v-model="form[key]" is-link readonly :placeholder="item.placeholder" :label="item.label" :rules="item.rules" :required="item.required" @click="item.showPicker = true" />
          <van-popup v-model:show="item.showPicker" position="bottom">
            <van-picker
              :title="item.label"
              :columns="item.options"
              @confirm="(e) => { item.onConfirm(e); item.showPicker = false }"
              @cancel="item.showPicker = false"
            />
          </van-popup>
        </template>
        <!-- 级联选择器 -->
        <template v-else-if="item.type === 'cascader'">
          <van-field
            v-model="form[key]"
            is-link
            readonly
            :label="item.label"
            :placeholder="item.placeholder || '请选择'"
            :required="item.required"
            @click="item.showPicker = true"
          />
          <van-popup v-model:show="item.showPicker" round position="bottom">
            <van-cascader
              v-model="form[key]"
              :title="item.placeholder || '请选择'"
              :options="item.options"
              @close="item.showPicker = false"
              @finish="item.onFinish"
            />
          </van-popup>
        </template>
        <!-- 日期选择 -->
        <template v-else-if="item.type === 'datePicker'">
          <van-field
            v-model="form[key]"
            is-link
            readonly
            name="datePicker"
            :label="item.label"
            :placeholder="item.placeholder || '点击选择时间'"
            :required="item.required"
            @click="item.showPicker = true"
          />
          <van-popup v-model:show="item.showPicker" position="bottom">
            <van-date-picker @confirm="($event) => { item.onConfirm($event); item.showPicker = false}" @cancel="item.showPicker = false" />
          </van-popup>
        </template>
        <!-- 开关 -->
        <template v-else-if="item.type === 'switch'">
          <van-field :label="item.label" :required="item.required">
            <template #input>
              <van-switch v-model="form[key]" />
            </template>
          </van-field>
        </template>
        <!-- 复选框 -->
        <template v-else-if="item.type === 'checkbox'">
          <van-field :label="item.label" :required="item.required">
            <template #input>
              <van-checkbox-group v-model="form[key]" direction="horizontal">
                <van-checkbox :name="opt.name" shape="square" v-for="opt in item.options" :key="opt.label">{{ opt.label }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
        </template>
        <!-- 单选 -->
        <template v-else-if="item.type === 'radio'">
          <van-field :label="item.label" :required="item.required">
            <template #input>
              <van-radio-group v-model="form[key]" direction="horizontal">
                <van-radio :name="opt.name" v-for="opt in item.options" :key="opt.label">{{ opt.label }}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </template>
        
        <!-- 文件上传 -->
        <template v-else-if="item.type === 'upload'">
          <van-field :label="item.label" :required="item.required">
            <template #input>
              <van-uploader v-model="form[key]" v-bind="item" />
            </template>
          </van-field>
        </template>
        <!-- 评分 -->
        <template v-else-if="item.type === 'rate'">
          <van-field :label="item.label" :required="item.required">
            <template #input>
              <van-rate v-model="form[key]" v-bind="item" />
            </template>
          </van-field>
        </template>
        <!-- 单行输入，type可以是text、number、password等-->
        <van-field v-model="form[key]" v-bind="item" clearable v-else />
      </template>
    </van-cell-group>
    <div style="margin: var(--van-cell-group-inset-padding);">
      <slot>
        <van-button type="primary" block native-type="submit" style="margin-top: 15px;">保存</van-button>
      </slot>
    </div>
  </van-form>
</template>

<style scoped>

</style>
